<template>
    <div class="result-board">
        <div class="result-board-text" v-if="$store.state.pk.Loser === 'all'">
            平局!
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.Loser === 'you'">
            You Lose
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.Loser === 'he'">
            You Win
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.Loser === 'white'">
          白色胜利
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.Loser === 'black'">
          黑色胜利
        </div>
        <div class="result-board-btn">
          <button
              v-if="$store.state.pk.localHostPk"
              @click="restart()"
              type="button"
              class="btn btn-danger btn-lg"
          >
            退出
          </button>
          <button
              v-else-if="$store.state.pk.isMatching"
              @click="restart()"
              type="button"
              class="btn btn-secondary btn-lg"
          >
            退出
          </button>
          <button
              v-else-if="$store.state.pk.isRoomUser"
              @click="restart()"
              type="button"
              class="btn btn-secondary btn-lg"
          >
            再来
          </button>
          <button
              v-else
              @click="restart()"
              type="button"
              class="btn btn-danger btn-lg"
          >
            回房间
          </button>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex';


export default {
    setup() {
        const store = useStore();

        store.commit("updateIsMe",false);

        const restart = () => {
          if(store.state.pk.isMatching){
            store.commit("updateLoser", "none");
            store.commit("clearAllPkInfo");
            store.commit("updateStatus","loading");
          }
          else if(store.state.pk.isRoomUser) {
              // store.commit("clearAllPkInfo");
              store.commit("updateLoser", "none");
              if(store.state.pk.botId === "-1")
              store.commit("updateIsReady",false);//不是ai对战才会出现未准备
              // store.dispatch("createRoom", {
              //   token: store.state.user.token,
              //   success(resp) {
              //     // console.log("getInfo成功");
              //     // router.push({ name: "home" });
              //     store.state.pk.status = "matching";
              //     ElMessage.success(resp);
              //   },
              //   error(resp) {
              //     store.state.pk.status = "loading";
              //     ElMessage.error(resp);
              //   },
              // })
              if(store.state.pk.localHostPk){
                store.commit("updateLocalHostPk",false);
                store.commit("updateStatus","loading");
              }
              else{
                store.commit("updateStatus","matching");
              }

          }
          else {
            store.commit("updateLoser", "none");
            store.commit("updateIsReady",false);
            // store.commit("clearAllPkInfo");
            store.state.pk.status = "matching";
          }
        }
        const exit = () =>{
          store.commit("updateLoser", "none");
          store.commit("clearAllPkInfo");
          store.state.pk.status = "loading";
        }

        return {
            restart,
            exit,
        };
    }
}

</script>

<style scoped>
div.result-board{
    height: 30vh;
    width: 30vw;
    background-color: rgba(50, 50, 50, 0.5);
    position: absolute;
    top:20vh;
    left: 35vw;
}
div.result-board-text{
    text-align: center;
    color: white;
    font-size: 50px;
    font-weight: 600;
    font-style: italic;
    padding-top: 5vh;

}
div.result-board-btn{
    padding-top: 7vh;
    text-align: center;
}
</style>